<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/book_datails.css?v=3.0" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<script>
			// 重写注入代码的方法，让注入代码使用此方法时出错
			String.fromCharCode = function(arg) {return true}
		</script>
	</head>
	<body>
		<div class="container" id="vue-con">
			<div class="top">
				<div class="left">
					<a href="javascript:history.back(-1);"><img src="img/back.png"><span>书籍详情</span></a>
				</div>
				<div class="right">
					<a href="index.html?lov"><span>书城</span><img src="img/home.png"></a>
				</div>
			</div>
			<div class="content">
				<div class="intro">
					<!--书籍图片-->
					<div class="intro_tu">
						<img :src="books.Image?init_image(books.Image):''">
					</div>
					<!--书籍介绍-->
					<div class="intro_right">
						<p class="intro_title">{{books.Title}}</p>
						<span class="intro_fenlei">{{tag.Name}}</span><br>
						<div class="intro_state">{{books.Author}}</div>
						<div class="intro_state"><span class="state"></span> | {{init_words(books.Words)}}万字</div>
						<div class="intro_bookarck" @click="shou_search()" v-if="show">加入书架</div>
					</div>
				</div>
				<div class="content_1">
					<h5>内容简介：</h5>
					<p class="intro_intro yincang">{{books.Description}}</p>
					<img src="img/back.png">
				</div>
				<div class="catalog">
					<p><span>目录</span><span class="total"></span></p>
					<div class="chapter">
						<p class="zuixin"></p>
						<div class="zhang">
							<p v-for="chapter in chapters">
								<a :href="'yuedu.html?id=' + books.ID+'&shu_head_id='+chapter.ID">{{chapter.Title}}</a>
							</p>
						</div>
					</div>
				</div>
				<div class="footer">
					<a :href="last_chapter" class="yuedu">开始阅读</a>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/getUrlParam.js" ></script>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="js/vue.min.js" ></script>
	<script type="text/javascript" src="js/local.js" ></script>
	<script>
		//			var host = "http://" + location.host;
		var id=UrlParm.parm("id");
		$(function() {
			var i = 0;
			//展开简介
			$(".content_1 img").click(function() {
				i++;
				if(i == 1) {
					$(".intro_intro").removeClass("yincang");
					$(this).css("transform", "rotate(90deg)");
				} else {
					$(".intro_intro").addClass("yincang");
					$(this).css("transform", "rotate(-90deg)");
					i = 0;
				}
			})
			//章节总数
			$.ajax({
				type:"get",
				url:host+"/count-chapter?BookID="+id+"",
				datatype:"json",
				success:function(data){
					if(!!data){
						div="";
						var total=data.total;
						div+='<a href="mulu.html?id='+id+'">共'+total+'章<img src="img/back.png"></a>'
						$(".total").html(div);
					}
					
				}
			})
			//最新章节
			$.ajax({
				type:"get",
				url:host+"/last-chapter?BookID="+id+"",
				datatype:"json",
				success:function(data){
					if(!!data.chapter){
						var div="";
						var Title=data.chapter.Title;
						var shu_head_id=data.chapter.ID;
						div+='<a href="yuedu.html?id='+id+'&shu_head_id='+shu_head_id+'">最新章节：'+Title+'</a>';
						$(".zuixin").html(div);
					}
					
				}
			})
		})
			var vu=new Vue({
			el: "#vue-con",
			data: {
				search: {
					Id:id,
					tag_id: 0, // 标签 ID 
				},
				books: [], // 显示的图书列表
				chapters:[],
				tag:[],
				last_chapter:"",
				show:true,
				
			},
			created: function() {
				let self = this;
				this.start_search();
				this.chapters_search();
				this.yishou_search();
			},
			methods: {
				init_words: function(words) {
					return (words/10000).toFixed(1)
				},
				// 开始搜索
				start_search: function() {
					let self = this;
					this.books;
					let url = host + "/book-info?ID="+self.search.Id;
					$.get(url, function(data) {
						if(!!data.book) {
							self.books = data.book;
							self.search.tag_id = data.book.TagID
							self.tag_search();
							document.title = data.book.Title;
						}
						if(self.books.Finished==1){
							$(".state").html("已完结");
						}
						if(self.books.Finished==2){
							$(".state").html("连载中");
						}
					})
				},
				chapters_search: function() {
					let self = this;
					this.chapters;
					let url = host + "/chapters?BookID="+self.search.Id+"&Limit=10&Offset=0";
					$.get(url, function(data) {
						if(!!data.list) {
							self.chapters = data.list;
							self.last_chapter = 'yuedu.html?id=' + self.search.Id+'&shu_head_id='+data.list[0].ID
						}
					})
				},
				tag_search: function() {
					let self = this;
					this.tag;
					let url = host + "/book-tag?TagID="+self.search.tag_id;
					$.get(url, function(data) {
						if(!!data.tag) {
								self.tag = data.tag;
						}
					})
				},
				shou_search: function() {
					let self = this;
					let url = host + "/bookmark?BookID="+self.search.Id;
					$.post(url)
					self.show = !self.show
					alert("添加成功!");
				},
				yishou_search: function() {
					let self = this;
					let url = host + "/check-bookmark-exist?BookID="+self.search.Id;
					$.get(url, function(data) {
						if(!!data.exist) {
							if(data.exist==true){
								self.show = false;
							}
						}
					})
				},
				init_image: function(url) {
					return host + "/" + url
				},
			}
		})
		
	</script>
	
	<script>
		var _hmt = _hmt || [];
		(function() {
		  var hm = document.createElement("script");
		  hm.src = "https://hm.baidu.com/hm.js?055cff4356b44984f650fdfa60a0cee6";
		  var s = document.getElementsByTagName("script")[0]; 
		  s.parentNode.insertBefore(hm, s);
		})();
	</script>
</html>